<template>
  <div class="form-view-row form-product-warranty-service-view">
    <label>{{ field.displayName }}</label>
    <div class="form-view-row-content">
      <product-service-table ref="productServiceTableRef" :columnFields="subformFields" :columnData="dataList" tableHeight="500" :serviceEdit="false" :serviceDelete="false"></product-service-table>
    </div>
  </div>
</template>

<script>
/* mixin */
import FormMixin from '@src/component/form/mixin/form';

import ProductServiceTable from '@src/modules/productV2/productView/components/ProductServiceTable.vue';

import { serviceTimeFields } from '@src/modules/productV2/productWarrantyServiceItem/productWarrantyItemListPage/fields.js';

import { useFormTimezone } from 'pub-bbx-utils'
const { disposeFormListViewTime } = useFormTimezone()

export default {
  name: 'form-product-warranty-service-view',
  mixins: [FormMixin],
  props: {
    value: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  components: {
    ProductServiceTable,
  },
  computed: {
    /** 子表单字段 */
    subformFields() {
      return [...(this.field?.subFormFieldList || []), ...serviceTimeFields];
    },
    dataList() {
      return disposeFormListViewTime(this.value || [], this.subformFields);
    },
  },
};
</script>
<style lang="scss" scoped>
.form-product-warranty-service-view {
  align-items: flex-start;
}
</style>
